<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入替换元素操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 插入和替换元素操作：针对元素增删改操作 
		append()			功能：在匹配元素集合中所有元素的内部末尾插入内容
		prepend()			功能：在匹配元素集合中所有元素的内部开头插入内容
		
		after()				功能：在匹配元素集合中所有元素的外部后面插入内容
		before()			功能：在匹配元素集合中所有元素的外部前面插入内容
		
		remove()			功能：移除匹配元素集合中所有的元素和子元素
		empty()
		
		replaceWith()
		-->
		<style>
			body{
				margin: 20px;
				
			}
			button{
				margin: 0 5px;
				padding: 10px 15px;
				cursor: pointer;
			}
			#target{
				border: 1px solid red;
				padding: 10px;
				margin-top: 10px;
				margin-left: 5px;
				padding: 10px;
			} 	
			.new_div{
				display: block;
				width: 300px;
				height: 300px;
				background-color:#ff0;
				border-radius:50%;
				background-image:url(../img/1.gif);
				background-size:100% 100%;
				color:transparent;
			}
		</style>
	</head>
	<body>
		<button id="appendBtn">内部末尾插入元素</button>
		<button id="prependBtn">内部开头插入元素</button>
		<button id="afterBtn">外部后面插入元素</button>
		<button id="beforeBtn">外部前面插入元素</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceBtn">替换元素</button>
		<div id="target">
			<p>目标元素的初始段落</p>
		</div>
		<!-- 用于插入跟替换的区域 -->
		<div id="newElement" style="display: none;">
			<p>插入元素的初始段落</p>
		</div>
		<script>
			$("#appendBtn").click(function(){
				//效果：点击按钮 追加“新元素---自带内容”
				//1.1  追加内容的新元素---克隆--html结构全部复制出来   元素包含属性
				var net=$("#newElement").clone();
				//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				//1.2  自带属性和属性值：隐藏---改为显示
				net.css("display","block");
				$("#target").append(net);
			});
			$("#prependBtn").click(function(){
				var net=$("#newElement").clone();
				net.css("display","block");
				$("#target").prepend(net);
			});
			$("#afterBtn").click(function(){
				var net=$("#newElement").addClass("new_div");
				$("#target").after(net);
			});
			$("#beforeBtn").click(function(){
				//生成  圆型  保留背景颜色  文本不需要，背景图 300*300
				/* $("#newElement").css({"border":"1px solid red",
									"width":"300px",
									"height":"300px",
									"backgroung-color":"yellow",
									"border-radius":"50%",
									"backgroung-image":"url(../img/1.gif)"}); */
				var net=$("#newElement").clone();
				//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				//1.2  自带属性和属性值：隐藏---改为显示
				net.css({"display":"block",
						"width":"300px",
						"height":"300px",
						"background-color":"#ff0",
						"border-radius":"50%",
						"background-image":"url(../img/1.gif)",
						"background-size":"100% 100%",
						"color":"transparent"});
				$("#target").before(net);
			});
			/* 5.点击 删除元素 按钮  页面上所有的元素和子元素全部删除【盒子模型】 */
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			/* 6. 点击  清空元素  按钮  页面上所有元素中内容全部删除【盒子模型不删】 */
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
			/* 7.点击 替换元素 按钮 页面上目标元素替换为新元素 */
			$("#replaceBtn").click(function(){
				//克隆
				var c=$("#newElement").clone().css("display","block");
				//替换  新元素  替换  目标元素
				$("#target").replaceWith(c);
			});
		</script>
	</body>
</html>